<template>
    <div id="app">
        <!-- 筛选条件 -->
        <div class="filter-container">
            <div class="filter-row">
                <div class="filter-group">
                    <label class="filter-label">年份选择</label>
                    <el-select v-model="queryParams.selectedYear" placeholder="请选择年份" style="width:100%">
                        <el-option v-for="year in years" :key="year" :label="year" :value="year">
                        </el-option>
                    </el-select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">月份选择</label>
                    <el-select v-model="queryParams.selectedMonths" multiple placeholder="请选择月份" style="width:100%">
                        <el-option v-for="month in months" :key="month.value" :label="month.label" :value="month.value">
                        </el-option>
                    </el-select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">产线选择</label>
                    <el-select v-model="queryParams.selectedLines" multiple placeholder="请选择产线" style="width:100%">
                        <el-option v-for="line in productionLines" :key="line" :label="line" :value="line">
                        </el-option>
                    </el-select>
                </div>
            </div>

            <div class="action-buttons">
                <el-button type="primary" icon="el-icon-search" @click="query">查询数据</el-button>
                <el-button icon="el-icon-refresh" @click="re">重置条件</el-button>
            </div>
        </div>

        <div class="chart-grid">
            <!-- ICT FPY 图表 -->
            <div class="chart-card">
                <div class="chart-header">
                    <div class="chart-title">
                        <el-select v-model="orders.dimension" placeholder="请选择排序" style="width:12%;margin-right: 5px;"
                            @change="orderChange()">
                            <el-option v-for="order in orderlist" :key="order" :label="order" :value="order">
                            </el-option>
                        </el-select>
                        <i :class="orderIcon" @click="order"></i>
                    </div>
                </div>
                <div class="chart-body">
                    <div class="chart-container" ref="ictFpy"></div>
                </div>
            </div>
        </div>

        <!-- 设备参数对比图表 -->
        <div class="chart-grid">
            <div class="chart-card">
                <div class="device-params-chart">
                    <!-- 全局控制区 -->
                    <div class="control-panel">
                        <div class="param-filters">
                            <span class="filter-label">显示：</span>
                            <label v-for="(param, index) in deviceParams" :key="index"
                                :class="['param-toggle', `bg-param${index + 1}/10`, `text-param${index + 1}`]">
                                <input type="checkbox" v-model="deviceShowParams[index]" class="param-checkbox">
                                {{ param.name }}({{ param.unit }})
                            </label>
                        </div>

                        <div class="control-right">
                            <div class="control-group">
                                <span class="control-label">排序：</span>
                                <select v-model="deviceSortType" class="control-select">
                                    <option value="device">产线</option>
                                    <option v-for="(param, index) in deviceParams" :key="'param' + index"
                                        :value="'param' + (index + 1)">
                                        按{{ param.name }}
                                    </option>
                                </select>
                            </div>

                            <div class="display-range">{{ deviceDisplayRange }}</div>
                        </div>
                    </div>

                    <!-- 主图表区域 -->
                    <div class="charts-container" ref="deviceChartsContainer">
                        <div v-for="(month, index) in deviceDisplayMonths" :key="index" class="compact-chart"
                            :style="{ width: deviceChartWidth + 'px' }">
                            <div class="echart-container" :id="'device-chart-month-' + index"></div>
                            <div class="month-title">{{ month }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
import { queryICTFpy, queryICTFpyMonthList } from "@/api/smtdashboard/dashboard"

export default {
    name: "QualityDashboard",
    data() {
        return {
            // 设备参数图表相关数据
            deviceParams: [
                { name: 'ICT FPY', unit: '%' },
                { name: 'ICT FY', unit: '%' }
            ],
            deviceShowParams: [true, true],
            deviceSortType: 'device',
            deviceMonthAmount: 12,
            deviceDisplayMonths: [],
            deviceCharts: [],
            deviceParamsMonths: [],
            deviceParamsData: [],

            datasetIndex: 0,
            orderIcon: 'el-icon-sort',
            orderlist: ['ICT FPY', 'ICT FY'],
            orders: {
                dimension: 'ICT FPY',
                order: 'asc'
            },
            //排序启用
            inverse: false,
            //表格数据
            tableData: [],
            //查询参数
            total: 0,
            queryParams: {
                selectedYear: '',
                selectedMonths: [],
                selectedLines: [],
            },
            data: {},
            years: [],
            months: [
                { value: 'Jan', label: '1月' },
                { value: 'Feb', label: '2月' },
                { value: 'Mar', label: '3月' },
                { value: 'Apr', label: '4月' },
                { value: 'May', label: '5月' },
                { value: 'Jun', label: '6月' },
                { value: 'Jul', label: '7月' },
                { value: 'Aug', label: '8月' },
                { value: 'Sep', label: '9月' },
                { value: 'Oct', label: '10月' },
                { value: 'Nov', label: '11月' },
                { value: 'Dec', label: '12月' }
            ],
            productionLines: ['#1', '#2', '#3', '#4', '#5', '#6', '#7', '#8', '#9', '#10', '#11', '#12', '#13', '#14', '#15'],
        }
    },
    computed: {
        deviceDisplayRange() {
            if (this.deviceDisplayMonths.length === 0) return '';
            return `${this.deviceDisplayMonths[0]}-${this.deviceDisplayMonths[this.deviceDisplayMonths.length - 1]}`;
        },
        deviceChartWidth() {
            const monthCount = this.deviceDisplayMonths.length;
            const minWidth = 180;
            const maxWidth = 500;

            // 计算基础宽度
            const container = this.$refs.deviceChartsContainer;
            if (!container) return minWidth;

            const containerWidth = container.clientWidth - 20;
            let baseWidth = containerWidth / monthCount;

            // 确保宽度在限制范围内
            return Math.max(minWidth, Math.min(maxWidth, baseWidth));
        }
    },
    created() {
        this.shortYear();
        this.query();
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
            // 监听窗口大小变化
            window.addEventListener('resize', this.handleResize);
        });
    },
    beforeDestroy() {
        this.destroyDeviceCharts();
        window.removeEventListener('resize', this.handleResize);
    },
    watch: {
        deviceMonthAmount(newVal) {
            this.deviceDisplayMonths = this.deviceParamsMonths.slice(0, newVal);
            this.$nextTick(() => {
                this.renderDeviceCharts();
            });
        },
        deviceShowParams: {
            deep: true,
            handler() {
                this.renderDeviceCharts();
            }
        },
        deviceSortType() {
            this.renderDeviceCharts();
        }
    },
    methods: {
        // 处理真实数据
        processDeviceData(data) {
            // 提取所有唯一的月份并按照自然月排序
            const months = [...new Set(data.map(item => item.month))].sort((a, b) => {
                // 将月份字符串转换为可排序的格式
                // 假设月份格式为 "2024-Jan", "2024-Feb" 等
                const monthOrder = {
                    'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4, 'May': 5, 'Jun': 6,
                    'Jul': 7, 'Aug': 8, 'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12
                };

                // 解析年份和月份
                const [yearA, monthA] = a.split('-');
                const [yearB, monthB] = b.split('-');

                // 先比较年份，再比较月份
                if (yearA !== yearB) {
                    return parseInt(yearA) - parseInt(yearB);
                }
                return monthOrder[monthA] - monthOrder[monthB];
            });

            this.deviceParamsMonths = months;
            this.deviceDisplayMonths = months.slice(0, this.deviceMonthAmount);

            // 提取所有产线
            const lines = [...new Set(data.map(item => item.line))];

            // 构建设备参数数据结构
            this.deviceParamsData = lines.map(line => {
                return {
                    deviceId: parseInt(line.replace('#', '')),
                    deviceName: line,
                    params: [
                        {
                            paramId: 1,
                            paramName: 'ICT FPY',
                            unit: '%',
                            monthlyValues: months.map(month => {
                                const record = data.find(d => d.line === line && d.month === month);
                                return record ? (record.sum1 ? record.sum1.toFixed(2) : 0) : 0;
                            })
                        },
                        {
                            paramId: 2,
                            paramName: 'ICT FY',
                            unit: '%',
                            monthlyValues: months.map(month => {
                                const record = data.find(d => d.line === line && d.month === month);
                                return record ? (record.sum2 ? record.sum2.toFixed(2) : 0) : 0;
                            })
                        }
                    ]
                };
            });
        },

        handleResize() {
            this.renderDeviceCharts();
        },

        destroyDeviceCharts() {
            this.deviceCharts.forEach(chart => chart.dispose());
            this.deviceCharts = [];
        },

        renderDeviceCharts() {
            this.destroyDeviceCharts();

            this.$nextTick(() => {
                this.deviceDisplayMonths.forEach((_, monthIdx) => {
                    this.createDeviceMonthChart(monthIdx);
                });
            });
        },

        createDeviceMonthChart(monthIdx) {
            const monthName = this.deviceDisplayMonths[monthIdx];
            const { deviceParamsData } = this;
            const { deviceShowParams, deviceSortType } = this;

            // 对设备进行排序
            const sortedDevices = [...deviceParamsData].sort((a, b) => {
                if (deviceSortType === 'device') {
                    return a.deviceId - b.deviceId;
                } else {
                    const paramIdx = parseInt(deviceSortType.replace('param', '')) - 1;
                    return b.params[paramIdx].monthlyValues[monthIdx] - a.params[paramIdx].monthlyValues[monthIdx];
                }
            });

            const chartId = `device-chart-month-${monthIdx}`;
            const chartDom = document.getElementById(chartId);
            if (!chartDom) return;

            // 准备数据
            const deviceNames = sortedDevices.map(dev => dev.deviceName);
            const param1Data = sortedDevices.map(dev => dev.params[0].monthlyValues[monthIdx]);
            const param2Data = sortedDevices.map(dev => dev.params[1].monthlyValues[monthIdx]);

            // 计算条形图数据的最大值
            const calculateMaxBarValue = () => {
                let maxValue = 0;
                if (deviceShowParams[0]) maxValue = Math.max(maxValue, ...param1Data);
                if (deviceShowParams[1]) maxValue = Math.max(maxValue, ...param2Data);

                // 将最大值翻倍，使底部坐标轴长度翻倍
                return (maxValue * 1.2).toFixed(0);
            };

            // 初始化ECharts实例
            const chart = echarts.init(chartDom);

            // 计算条形图最大值
            const maxBarValue = calculateMaxBarValue();

            // 配置项
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    borderColor: '#ddd',
                    textStyle: {
                        color: '#666'
                    },
                    formatter: function (params) {
                        let result = `<div style="font-size:10px;color:#333;margin-bottom:5px;">${params[0].name}</div>`;
                        params.forEach(param => {
                            result += `<div>${param.seriesName}: ${param.value}%</div>`;
                        });
                        return result;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '3%',
                    top: '15%',
                    containLabel: true
                },
                yAxis: {
                    type: 'category',
                    data: deviceNames,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        fontSize: 8
                    }
                },
                xAxis: [
                    {
                        type: 'value',
                        name: '值',
                        nameTextStyle: {
                            fontSize: 9
                        },
                        position: 'bottom',
                        min: 0,
                        max: maxBarValue,
                        axisLabel: {
                            fontSize: 8,
                            formatter: function (value) {
                                return value + '%'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(0,0,0,0.05)'
                            }
                        }
                    }
                ],
                series: []
            };

            // 添加条形图系列
            if (deviceShowParams[0]) {
                option.series.push({
                    name: 'ICT FPY(%)',
                    type: 'bar',
                    data: param1Data,
                    itemStyle: {
                        color: '#4EC9F1',
                        borderRadius: [0, 3, 3, 0]
                    },
                    barWidth: '20%',
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function (params) {
                            return params.value + '%';
                        },
                        fontSize: 10
                    }
                });
            }

            if (deviceShowParams[1]) {
                option.series.push({
                    name: 'ICT FY(%)',
                    type: 'bar',
                    data: param2Data,
                    itemStyle: {
                        color: '#3CC7B1',
                        borderRadius: [0, 3, 3, 0]
                    },
                    barWidth: '20%',
                    label: {
                        show: true,
                        position: 'right',
                        formatter: function (params) {
                            return params.value + '%';
                        },
                        fontSize: 10
                    }
                });
            }

            // 设置配置项并渲染图表
            chart.setOption(option);

            // 响应窗口大小变化
            const resizeChart = () => chart.resize();
            window.addEventListener('resize', resizeChart);

            this.deviceCharts.push(chart);
        },

        orderChange() {
            if (this.queryParams.selectedLines.length == 1) {
                this.initChartOneLine(this.tableData)
            } else { this.initChart(this.tableData) }
        },
        //排序方法
        order() {
            if (this.orderIcon === 'el-icon-sort') {
                this.datasetIndex = 1;
                this.orderIcon = 'el-icon-sort-down'
                this.orders.order = 'desc'
                this.orderChange()
            } else if (this.orderIcon === 'el-icon-sort-down') {
                this.datasetIndex = 1;
                this.orderIcon = 'el-icon-sort-up'
                this.orders.order = 'asc'
                this.orderChange()
            } else {
                this.orderIcon = 'el-icon-sort'
                this.datasetIndex = 0;
                this.orderChange()
            }
        },
        //查询
        query() {
            const year = '20' + this.queryParams.selectedYear.slice(-2) + '-'
            const selectedMonths = [];
            if (this.queryParams.selectedMonths != []) {
                for (let index = 0; index < this.queryParams.selectedMonths.length; index++) {
                    selectedMonths.push(year + this.queryParams.selectedMonths[index]);
                }
            }
            if (this.queryParams.selectedLines.length == 1) {
                queryICTFpyMonthList(this.queryParams.selectedYear, selectedMonths, this.queryParams.selectedLines).then(response => {
                    this.tableData = response
                    this.initChartOneLine(response);
                    // 处理设备参数数据
                    this.processDeviceData(response);
                    this.renderDeviceCharts();
                })
            } else {
                queryICTFpy(this.queryParams.selectedYear, selectedMonths, this.queryParams.selectedLines).then(response => {
                    this.tableData = response
                    this.initChart(response);
                })
                queryICTFpyMonthList(this.queryParams.selectedYear, selectedMonths, this.queryParams.selectedLines).then(response => {
                    // 处理设备参数数据
                    this.processDeviceData(response);
                    this.renderDeviceCharts();
                })
            }

            // window.addEventListener('resize', this.resizeCharts);
        },
        //重置
        re() {
            this.queryParams.selectedMonths = []
            this.queryParams.selectedLines = []
        },
        //获取当前年
        shortYear() {
            const year = new Date().getFullYear();
            const lyear = (year % 100) - 2;
            this.queryParams.selectedYear = "F" + (year % 100);
            for (let index = 0; index < 5; index++) {
                this.years.push("F" + (lyear + index))
            }
            this.queryParams = this.$route.query;
        },
        initChart(response) {
            let chartDom;
            chartDom = this.$refs.ictFpy;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas = [
                ['生产线', 'ICT FPY', 'ICT FY'],
                ...response.map(item => [
                    item.line,   // 对应xAxis数据
                    item.sum1 ? item.sum1.toFixed(2) : 0, //ICT FPY
                    item.sum2 ? item.sum2.toFixed(2) : 0    // ICT FY
                ])
            ];
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            let sum4 = 0;
            let sum5 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].sum1;
                sum2 += response[index].sum2;
                sum3 += response[index].sum3;
                sum4 += response[index].sum4;
                sum5 += response[index].sum5;
                if (response[index].sum1 > max) {
                    max = response[index].sum1;
                }
            }

            sum1 = (sum1 / response.length).toFixed(2);
            sum2 = (sum2 / response.length).toFixed(2);
            max = Math.ceil(max) + 5;

            // 柱状图
            const option = {
                title: [
                    // 左侧标题
                    {
                        text: 'ICT FPY/FY-工程良率(ICT)',
                        left: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 23,
                            fontWeight: 'bold'
                        }
                    },
                    // 右侧标题
                    {
                        text: `平均FPY: ${Number(sum3/sum5*100).toFixed(1)}%       平均FY: ${Number(sum4/sum5*100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 18,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },
                    {
                        transform: {
                            type: 'sort',
                            config: {
                                dimension: this.orders.dimension,
                                order: this.orders.order
                            }
                        }
                    }
                ],
                legend: {
                    data: ['ICT FPY', 'ICT FY'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: 'ICT FPY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'ICT FY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[2] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#3CC7B1'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
        initChartOneLine(response) {
            let chartDom;
            chartDom = this.$refs.ictFpy;
            if (!chartDom) return;

            const chart = echarts.init(chartDom);
            let datas = [
                ['月份', 'ICT FPY', 'ICT FY'],
                ...response.map(item => [
                    item.month,   // 对应xAxis数据
                    item.sum1 ? item.sum1.toFixed(2) : 0, //ICT FPY
                    item.sum2 ? item.sum2.toFixed(2) : 0    // ICT FY
                ])
            ];
            let max = 0;
            let sum1 = 0;
            let sum2 = 0;
            let sum3 = 0;
            let sum4 = 0;
            let sum5 = 0;
            for (let index = 0; index < response.length; index++) {
                sum1 += response[index].sum1;
                sum2 += response[index].sum2;
                sum3 += response[index].sum3;
                sum4 += response[index].sum4;
                sum5 += response[index].sum5;
                if (response[index].sum1 > max) {
                    max = response[index].sum1;
                }
            }

            sum1 = (sum1 / response.length).toFixed(2);
            sum2 = (sum2 / response.length).toFixed(2);
            max = Math.ceil(max) + 5;

            // 柱状图
            const option = {
                title: [
                    // 左侧标题
                    {
                        text: 'ICT FPY/FY-工程良率(ICT)',
                        left: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 23,
                            fontWeight: 'bold'
                        }
                    },
                    // 右侧标题
                    {
                        text: `平均FPY: ${Number(sum3/sum5*100).toFixed(1)}%       平均FY: ${Number(sum4/sum5*100).toFixed(1)}%`,
                        right: 0,
                        top: 0,
                        textStyle: {
                            fontSize: 18,
                            fontWeight: 'bold'
                        }
                    },
                    // 主标题
                    {
                        left: 'center',
                        top: 30  // 下移给顶部标题留空间
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataset: [
                    {
                        source: datas,
                    },
                    {
                        transform: {
                            type: 'sort',
                            config: {
                                dimension: this.orders.dimension,
                                order: this.orders.order
                            }
                        }
                    }
                ],
                legend: {
                    data: ['ICT FPY', 'ICT FY'],
                    bottom: 10
                },
                grid: {
                    top: '15%',
                    right: '5%',
                    left: '10%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'category',
                    // data: this.queryParams.selectedLines,
                    axisLabel: {
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis:
                    [
                        {
                            type: 'value',
                            name: '',
                            min: 0,
                            max: max,
                            position: 'left',
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#5470C6'
                                }
                            },
                            axisLabel: {
                                formatter: '{value}%'
                            }
                        }
                    ],
                series: [
                    {
                        name: 'ICT FPY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            // type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[1] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#4EC9F1'
                        },
                        datasetIndex: this.datasetIndex
                    },
                    {
                        name: 'ICT FY',
                        type: 'line',
                        yAxisIndex: 0,
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            type: 'dashed',
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function (params) {
                                return params.value[2] + '%';
                            }
                        },
                        itemStyle: {
                            color: '#3CC7B1'
                        },
                        datasetIndex: this.datasetIndex
                    }
                ]
            };

            chart.setOption(option);
        },
    }
};
</script>

<style scoped>
#app {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    color: #333;
    padding: 20px;
    min-height: 100vh;
}

.filter-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 15px;
}

.filter-group {
    flex: 1;
    min-width: 250px;
}

.filter-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
}

/* 修改为每行1个图表 */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 20px;
}

.chart-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chart-header {
    background: linear-gradient(to right, #f8f9fc, #e9ecef);
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.chart-title {
    font-size: 16px;
    /* 标题字体缩小 */
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    align-items: center;
}

.chart-title i {
    margin-right: 8px;
    color: #3498db;
    font-size: 18px;
}

.chart-body {
    padding: 15px;
    flex: 1;
    /* 使图表区域填充剩余空间 */
    min-height: 400px;
    /* 最小高度保证一致性 */
}

.chart-container {
    width: 100%;
    height: 100%;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 15px;
}

/* 设备参数对比图表样式 */
.device-params-chart {
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #f9fafc;
    border-radius: 6px;
}

.param-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.param-toggle {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.param-toggle:hover {
    opacity: 0.8;
}

.param-checkbox {
    margin-right: 5px;
}

.control-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control-label {
    font-size: 12px;
    color: #606266;
}

.control-select {
    padding: 5px 10px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
}

.control-select:focus {
    border-color: #409eff;
}

.display-range {
    font-size: 12px;
    color: #909399;
    padding: 5px 10px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
}

.charts-container {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 20px;
}

.compact-chart {
    flex-shrink: 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

.echart-container {
    height: 300px;
    width: 100%;
}

.month-title {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
}

/* 参数颜色定义 */
.bg-param1 {
    background-color: #4EC9F1;
}

.bg-param2 {
    background-color: #3CC7B1;
}

.text-param1 {
    color: #4EC9F1;
}

.text-param2 {
    color: #3CC7B1;
}

.bg-param1\/10 {
    background-color: rgba(78, 201, 241, 0.1);
}

.bg-param2\/10 {
    background-color: rgba(60, 199, 177, 0.1);
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .chart-grid {
        grid-template-columns: 1fr;
        /* 中等屏幕每行1个 */
    }

    .filter-row {
        flex-direction: column;
    }

    .filter-group {
        min-width: 100%;
    }

    .charts-container {
        flex-direction: column;
        align-items: center;
    }

    .compact-chart {
        width: 100% !important;
        max-width: 600px;
    }
}

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr;
        /* 小屏幕每行1个 */
    }

    .chart-title {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .chart-grid {
        grid-template-columns: 1fr;
        /* 移动端每行1个 */
    }

    .control-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .control-right {
        width: 100%;
        justify-content: space-between;
    }

    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .action-buttons .el-button {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .chart-body {
        min-height: 250px;
        /* 移动端图表高度稍小 */
    }

    .chart-title {
        font-size: 14px;
    }
}
</style>